<%-- 
    Document   : mainOneLog
    Created on : 2020-5-24, 14:50:33
    Author     : Lenovo
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
                <link rel="stylesheet" href="css/font-awesome.min.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <title>显示一个日志</title>
    </head>
    <body background="images/back.jpg" style=" background-size:100% 100%;background-attachment: fixed;">
        
        <!--图片-->
        <div style="left: 200px">
            <image src="images/${requestScope.log.getImag()}" alt="" style="position: absolute; left: 140px" width="1000" height="300"/>
            <div style="opacity: 0.3;background-color: #000;width: auto;height: 80px;position: absolute; left: 140px;top:140px">
                <h1 style="color: white; align-content: center;font-size: 40px;font-weight: bold">${requestScope.log.getName()}</h1>
            </div>
        </div>

        
        
        <!--日志内容和评论、回复-->
        <div class="bg-danger" id="logContent" style="height:auto;width: 750px;position: absolute;top: 310px;left: 140px;background-color:snow">
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者: <a href="#">${requestScope.log.getUserid()}</a>
            </p>
            <p style="margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px">${requestScope.log.getContent()}</p>
            <p style="margin-left: 20px">
                时间:${requestScope.log.getTime()}
            </p>

            
            <!--评论,循环-->
            <c:forEach items="${requestScope.remark}" var="remark">
            <div style="width: 690px;height:auto;margin-left: 20px;margin-top: 20px;margin-bottom: 20px;background-color: #E1E2E2">        
                <image src="images/img3.jpg" width="80" height="90" style="margin-left: 10px;margin-top: 10px"/>
                <p style="margin-top: -90px; margin-left: 100px;">&nbsp;&nbsp;<a href="#">${remark.getUserName()}</a></p>
                
                <p style=" margin-left: 100px;">&nbsp;&nbsp;${remark.getContent()}</p>
                <p style="margin-top: 30px;margin-left: 110px">
                时间:${remark.getTime()}
            </p>
            <!--点赞-->
            <form action="grmals">
                <input type="text" hidden name="id" value="${requestScope.log.getId()}">
                <input type="text" hidden name="remarkId" value="${remark.getId()}">
                <button class=" btn-lg" style="border: none;background-color:#c7ddef;margin-left: 10px;margin-bottom: 5px;"><i class="fa fa-thumbs-o-up">点赞${remark.getAgree()}</i></button>
            </form>
            
            </div>
            </c:forEach>
            <br>
            <hr>
            <!--新建评论-->
            <div style="width: 700px;height: 300px;margin-top: 20px;margin-left: 20px;">
                <form action="alrms">
                    <input type="text" class="hidden" name="logid" value="${requestScope.log.getId()}">
                    <textarea name="content" id="remark" cols="83" rows="8" style="margin-left: 30px;margin-top: 20px" placeholder="输入评论"></textarea>
                    <div style="width: 600px;height: 40px;margin-top: 5px;margin-left: 20px;">
                        <button type='button' class="glyphicon glyphicon-bold  btn-lg btn" style="margin: 0;padding: 0;margin-left: 10px;" onclick="document.getElementById('remark').style.fontWeight = 'bold'"></button>
                        <button type='button' class="glyphicon glyphicon-italic btn-lg" style="margin: 0;padding: 0;border: 0;margin-left: 30px;" onclick="document.getElementById('remark').style.fontStyle='italic'"></button>
                        <button type='button' class="glyphicon glyphicon-text-width btn-lg" style="margin: 0;padding: 0;border: 0;margin-left: 30px" onclick="document.getElementById('remark').style.textDecoration='underline'"></button>
                        
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn bg-primary">发表</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!--左侧日志内容结束-->

        <!--更多日志推荐-->
        <div id="moreLog" style="height:auto;width: 240px;position: absolute;top: 310px;left: 900px;background-color:#c7ddef">
            <br><br>
            <p style="font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;更多日志推荐</p>
            <hr style=" width: 80%;border:none;border-top-width:2.2px;border-top-style:solid;border-top-color:#FFF;">
            <!--循环打印-->
            <c:forEach items="${requestScope.list}" var="inlist">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="glyphicon glyphicon-tag"></span>
                <a href="solfm?logId=${inlist.getId()}" name="name" style="color: #101010">${inlist.getName()}</a>
                <hr style=" width: 80%;border:none;border-top-width:0.5px;border-top-style:solid;border-top-color:#FFF;">
            </c:forEach>
        </div>
    </body>
</html>
